<template>
    <div class="w-full">
        <div class="p-9 bg-white rounded-[6px] flex mb-8 items-center">
            <img class="mr-8 w-28 h-28" src="../../assets/images/Frame_1410067917.png" alt="">
            <div class="flex-1">
                <div class="flex text-custom-text text-[24px] font-[600] leading-8 mb-4 items-center justify-between">
                  <div class="flex">
                    <span>
                      本次考核全部结束
                    </span>
                    <div class="AI-btn" @click="navigateToConversation" v-if="isShowToAI">
                      进行AI智能分析({{ countDown }}s)
                    </div>
                  </div>
                  <Button @click="goBack">返回</Button>
                </div>
                <div class="rounded-[6px] bg-[#FAFAFA] px-6 py-4 flex">
                  <div class="flex justify-between flex-col mr-4">
                    <div class="text-custom-text-45 text-[14px] font-[400] leading-[22px] text-left">岗位</div>
                    <div class="text-custom-text-65 text-[14px] font-[400] leading-[22px] text-left">{{assessResultData.job}}</div>
                  </div>
                  <div class="flex justify-between flex-col mr-4" >
                    <div class="text-custom-text-45 text-[14px] font-[400] leading-[22px] text-left">考核名称</div>
                    <div class="text-custom-text-65 text-[14px] font-[400] leading-[22px] text-left">{{assessResultData.paper_name}}</div>
                  </div>
                  <div class="flex justify-between flex-col mr-4" >
                    <div class="text-custom-text-45 text-[14px] font-[400] leading-[22px] text-left">考核总得分</div>
                    <div class="text-custom-text-65 text-[14px] font-[400] leading-[22px] text-left">{{assessResultData.score}}</div>
                  </div>
                  <div class="flex justify-between flex-col mr-4" v-for="item in assessResultData.chapter_score">
                    <div class="text-custom-text-45 text-[14px] font-[400] leading-[22px] text-left">{{ item.chapter_name }}</div>
                    <div class="text-custom-text-65 text-[14px] font-[400] leading-[22px] text-left">{{ item.score }}</div>
                  </div>
                </div>
            </div>
        </div>

        <div class="overflow-auto" style="height: calc(100% - 232px);">
            <div class="before:content-[' '] 
                before:inline-block 
                before:w-1 before:h-4
                rounded-[1px] 
                before:bg-[#33A0FF] before:bg-gradient-to-b from-[#9DD1FF] to-[#33A0FF]
                before:mr-2 text-[18px] font-[500] leading-[26px] text-custom-text
                flex items-center mb-4">章节得分详情
            </div>
            <div class="grid grid-cols-4 gap-4">
                <ChapterCard :cardData="cardData" type="3" @cardClick="handleCardClick"/>
            </div>
        </div>
    </div>
</template>
<script setup>
import {computed, onMounted, onUnmounted, ref} from "vue";
import {StorageUtil} from "@/utils/common.js";
import {userApi} from "@/api/index.js";
import ChapterCard from "@/views/examCourses/components/chapterCard.vue";
import {useRoute, useRouter} from "vue-router";
import { useUserStore } from "@/stores/user.js";
const userStore = useUserStore();
const isShowToAI = computed(() => {
  const info = userStore.userInfo
  return info.user_type != '2' && info.user_type != '3' && info.user_type != '4' && info.user_type != '5'
});

const route = useRoute()
const router = useRouter()
const cardData = ref([])
const {paperId, testId} = route.query
const assessResultData = computed(() => {
  return StorageUtil.session.get('assessResultData') || {}
})
const countDown = ref(5)
let timer = null

onMounted(() => {
  getPaperRecord()
  if (isShowToAI.value) {
    // 页面加载时自动开始倒计时
    startCountDown()
  }
})

const getPaperRecord = () => {
  userApi.getStudentchapterRecord(testId).then(data => {
    cardData.value = data
  })
}

const handleCardClick = (row) => {
  StorageUtil.session.set('paperData', row)
  router.push({
    path: '/examCourses/chapterDetail',
    query: {
      paperId,
      chapterId: row.id
    }
  })
}

// 开始倒计时
const startCountDown = () => {
  // 重置倒计时
  countDown.value = 5
  // 清除可能存在的定时器
  if (timer) {
    clearInterval(timer)
  }
  
  // 开始5秒倒计时
  timer = setInterval(() => {
    countDown.value--
    if (countDown.value <= 0) {
      clearInterval(timer)
      navigateToConversation()
    }
  }, 1000)
}

// 跳转到会话页面
const navigateToConversation = () => {
  clearInterval(timer)
  sessionStorage.setItem('defaultDialog', JSON.stringify({
    text: '最近一次考核情况',
    testId: testId
  }))
  router.push({
    path: '/conversation',
    query: {}
  })
}
const goBack = () => {
  router.go(-2)
}

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>
<style lang="scss" scoped>
.AI-btn{
  width: 153px;
  line-height: 32px;
  background: linear-gradient( 90deg, #59D3D7 0%, #0098FF 100%);
  border-radius: 6px 6px 6px 6px;
  font-size: 14px;
  color: #FFFFFF;
  text-align: center;
  margin-left: 10px;
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    opacity: 0.9;
  }
}
</style>
